<template>
  <div>
    <!-- 对layout可以进行修改并进行主模板的设计 -->
    <el-container style="padding:0">
      <el-aside width="200px">
           <Vheader></Vheader>
      </el-aside>
      <el-container>
        <el-header style="padding:0">
             <div class="header">
                  Nuxt-App
             </div>
        </el-header>
        <el-main>
                    <!-- 基础视图 -->
            <transition name="test">
                <nuxt />
            </transition>
              
            <!-- 命名视图 -->
            <NuxtChild name="top" />
            <!-- 组件只会在客户端被渲染  -->
            <client-only placeholder="Loading...">
            <!-- comments 组件只会在客户端被渲染 -->
              阿萨德
            </client-only>
            <div>页脚</div>
        </el-main>
      </el-container>
    </el-container>
   
   
    
  </div>
</template>


<script lang="ts">
import Vheader from './components/header.vue'
import Vue from 'vue'
export default Vue.extend({
  name: 'layout',
  components:{
     Vheader
  }
})
</script>
<style>
.header{
    width: 100%;
    background: #fff;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 10%);
     height: 100%;
     display: flex;
     align-items: center;
     padding: 0 1.1rem;
     color: darkcyan;
     font-weight: 100;
}
</style>

